<template>
    <div class="piplineMainPage">
        <div class="right-top-menu">
            <div class="add-new-project" @click="addNewProject()">添加新项目</div>
            <div class="add-new-project" @click="openConsolePage()">系统配置</div>
            <div class="exit" @click="exit()">退出系统</div>
        </div>
        <div class="text unselectable">管线数据排查系统</div>
        <div class="projectPanel-container">
            <div class="project-area-tree">
                <el-tree ref="projectAreaTree"
                         node-key="id"
                         current-node-key="id"
                         :data="areaTreeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </div>
            <div class="project-panel">
                <div class="search-panel">
                    <div class="search-item">
                        <div>项目年份：</div>
                        <div>
                            <el-date-picker
                              v-model="queryForm.year"
                              :clearable="true"
                              type="year"
                              format="yyyy"
                              value-format="yyyy"
                              placeholder="选择年份">
                            </el-date-picker>
                        </div>
                    </div>
                    <div class="search-item">
                        <div>项目名称：</div>
                        <div>
                            <el-input size="mini" v-model="queryForm.projectName" placeholder="请输入项目名称"></el-input>
                        </div>
                    </div>
                    <div class="search-item">
                        <div>
                            <el-button icon="el-icon-search" type="primary" size="mini" @click="initProjectList">查询</el-button>
                        </div>
                        <div>
                            <el-button size="mini" @click="resetQueryForm">重置</el-button>
                        </div>
                    </div>
                </div>
                <div class="project-panel-list">
                    <div class="list-header">
                        <div>序号</div>
                        <div>项目名称</div>
                        <div>区域</div>
                        <div>年份</div>
<!--                        <div>状态</div>-->
                        <div>操作</div>
                    </div>
                    <div class="list-content">
                        <div class="project-item" v-for="(item, index) in projectList" :key="item.projectId">
                            <div>
                                {{ index + 1 }}</div>
                            <div>
                                {{ item.projectName }}</div>
                            <div>
                                {{ item.areaObj.areaName }}</div>
                            <div>
                                {{ item.pjYear }}</div>
<!--                            <div>-->
<!--                                {{ item.status }}</div>-->
                            <div>
                              <el-button size="mini" type="primary" @click="enterProject(item)">进入</el-button>
                              <el-button size="mini" type="primary" @click="editProject(item)">编辑</el-button>
                                <el-button size="mini" type="danger"
                                    @click="deleteProject(item.projectId)">删除</el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="projectPanel">
                <div class="project-item" v-for="item in projectList">
                    <div class="item-title">{{ item.projectName }}</div>
                    <div class="item-time">项目ID：{{ item.projectId }}</div>
                    <div class="item-time">状态：{{ item.status }}</div>
                    <div class="item-operation">
                        <div class="btn-donate" @click="enterProject(item)">进入项目</div>
                        <div class="btn-donate" @click="deleteProject(item.projectId)">删除项目</div>
                    </div>
                </div>
            </div> -->
        </div>
        <el-dialog title="添加新项目" :visible.sync="dialogToAdd" top="15%" width="480px" :close-on-click-modal="false">
            <el-form :model="itemForm">
                <el-form-item label="">
                    <el-input v-model="itemForm.name" placeholder="请输入项目名称"></el-input>
                </el-form-item>
                <el-form-item label="项目年份">
                  <el-date-picker
                    v-model="itemForm.pjYear"
                    type="year"
                    placeholder="选择年">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="项目地区">
                  <el-cascader
                    style="width: 100%"
                    :options="areaTreeData"
                    v-model="itemForm.areaCode"
                    :props="{ label: 'name', value: 'id' }"
                    placeholder="请选择所属父字典"
                    :clearable="true"
                    :change-on-select="true"
                  />
                </el-form-item>
                <el-form-item label="坐标系">
                  <el-select v-model="itemForm.sourceCoordinateSystem" placeholder="请选择坐标系">
                    <el-option
                      v-for="(item, index) in coordinateSystems"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <div class="dialog-footer">
                    <el-button type="primary" @click="confirmAddProject">确认</el-button>
                    <el-button @click="dialogToAdd = false">取消</el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { encrypt, setToken } from '@/utils';
import { PiplineProjectController, PmDictDataController } from '@/api/index.js';
import { mapMutations } from 'vuex';
import { treeDataTranslate, findItemFromList } from '@/utils';
import coordinateSystems from '@/views/pipelineManage/coordinateSystem';
import formEditFormProject from '@/views/pipelineManage/editProject.vue';

export default {
    name: 'PipelineManage',
    data() {
        return {
            dialogToAdd: false,
            coordinateSystems,
            itemForm: {
                name: "",
                pjYear: "",           // 项目年份
                areaCode: "",         // 项目地区 ID
                sourceCoordinateSystem: "EPSG:4549"  // 默认值
            },
            projectList: [],
            areaTreeData: [],//地区树结构
            defaultProps: {
                children: 'children',
                label: 'name',
                isLeaf: (data, node) => {
                    // 如果当前节点有children，并且children长度大于0，则不是叶子节点
                    if (data.children && data.children.length > 0) {
                        return false;
                    }
                    return true;
                }
            },
            options: [{
                value: 'all',
                label: '所有'
            }, {
                value: '2025',
                label: '2025'
            }],
            queryForm: {
              year: '',
              projectName: '',
              selectAreaCode: ''
            },
        };
    },
    components: {
    },
    mounted() {
        // 初始化各类字典
        this.initPmDict()
        this.initProjectList();
        this.initAreaTree();
    },
    watch: {
        dialogToAdd(newVal) {
            if (!newVal) {
                this.itemForm = {
                    name: ""
                }
            }
        }
    },
    methods: {
        initPmDict() {
            PmDictDataController.listDictByTypeIds(this, {}).then(res => {
                this.setPmDict(res.data);
            })
        },
        resetQueryForm() {
          this.queryForm.year = '';
          this.queryForm.projectName = '';
        },
        initProjectList() {
            let that = this;
            let params = {
                "orderParam": [
                    {
                        "fieldName": "",
                        "asc": true,
                        "dateAggregateBy": ""
                    }
                ],
                "projectDtoFilter": {
                    "projectName": this.queryForm.projectName,
                    "pjYear": this.queryForm.year,
                    "areaCode": this.queryForm.selectAreaCode
                },
                "pageParam": {
                    "pageNum": 0,
                    "pageSize": 0,
                    "count": true
                }
            };
            PiplineProjectController.ListProject(this, params, null, { showMask: false }).then((res) => {
                console.log("查询项目列表成功：", res)
                if (res.data && res.data.dataList.length > 0) {
                    that.projectList = res.data.dataList;
                } else {
                    that.projectList = [];
                }

            }).catch((err) => {
                console.error("查询项目列表失败：", err);
            });
        },
        queryProjectList() {

        },
        initAreaTree() {
            let that = this;
            let params = {};
            PiplineProjectController.listAreaTree(this, params, null, { showMask: false }).then((res) => {
                console.log("获取地区树成功：", res);
                if (res.data && res.data.length > 0) {
                    that.areaTreeData = treeDataTranslate(res.data, 'id', 'parentId');
                    // that.areaTreeData = res.data;
                    console.log("地区树结构xxxxxxxxxxxxx：", that.areaTreeData);
                } else {
                    that.areaTreeData = [];
                }
            }).catch((err) => {
                console.error("获取地区树失败：", err);
            });
        },
        handleNodeClick(e) {
            console.log("点击节点：", e);
            if (e.id !== this.queryForm.selectAreaCode) {
              this.queryForm.selectAreaCode = e.id;
            } else {
              this.queryForm.selectAreaCode = undefined;
              this.$nextTick(() => {
                this.$refs.projectAreaTree.setCurrentKey(null);
              });
            }
            this.initProjectList();
        },
        enterProject(project) {
            let that = this;
            let params = {
                "projectId": project.projectId
            };
            PiplineProjectController.ListProjectConfig(this, params, null, { showMask: false }).then((res) => {
                console.log("获取项目配置成功1：", project);
                console.log("获取项目配置成功2：", {
                    projectId: project.projectId,
                    imagePath: project.imageDirectory,
                    data: res.data
                })
                let mapCenter = [119.583385126168352, 31.179500424737491];
                if (project.mapCenterX && project.mapCenterY) {
                    mapCenter = [project.mapCenterX, project.mapCenterY];
                }
                that.setCurrentProjectConfig({
                    projectId: project.projectId,
                    imagePath: project.imageDirectory,
                    mapCenter: mapCenter,
                    projectName: project.projectName,
                    templateId: project.templateId,
                    status: project.status,
                    data: res.data
                });
                that.$router.replace({ name: 'pipeline' });
            }).catch((err) => {
                console.error("获取项目配置失败：", err);
            });
        },
        exit() {
            let that = this;
            this.$confirm('确定要返回首页？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                setToken(null);
                that.$router.replace({ name: 'login' });
            })
                .catch(action => {
                    console.log("异常：", action)
                });
        },
        addNewProject() {
            let params = {
            };

            this.$dialog
              .show('新建', formEditFormProject, { area: '700px' }, { ...params, subPage: true })
              .then(res => {
                this.initProjectList();
              })
              .catch(e => {});
        },
        editProject(row) {
          let params = {
            projectId: row.projectId,
          };

          this.$dialog
            .show('编辑', formEditFormProject, { area: '700px' }, { ...params, subPage: true })
            .then(res => {
              this.initProjectList();
            })
            .catch(e => {});
        },
        openConsolePage() {
            console.log("进入控制台")// ✅ 正确做法：使用 window.open + router.resolve 获取 URL
            const routeData = this.$router.resolve({
                name: 'main', // 或 path: '/your-path'
            });
            window.open(routeData.href, '_blank');
        },
        confirmAddProject() {
            let that = this;
            let params =
            {
                "projectDto": {
                    "projectId": "",
                    "projectName": this.itemForm.name,
                    "templateId": "",
                    "imagePath": "",
                    "status": ""
                }
            };
            PiplineProjectController.AddProject(this, params, null, { showMask: false }).then((res) => {
                console.log("添加新项目成功：", res.success !== undefined && res.success === true);
                if (res.success !== undefined && res.success === true) {
                    that.$message.success('添加成功');
                    that.initProjectList();
                } else {
                    that.$message.error('添加失败', res.errorMessage);
                }
                that.dialogToAdd = false;
            }).catch((err) => {
                console.error("添加新项目失败：", err);
                that.$message.error('添加失败', err.errorMessage);
                that.dialogToAdd = false;
            });
        },
        deleteProject(projectId) {
            let that = this;
            this.$confirm('确定要删除该项目？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                let params = {
                    "projectId": projectId
                };
                PiplineProjectController.DeleteProject(this, params, null, { showMask: false }).then((res) => {
                    console.log("删除项目成功：", res.success !== undefined && res.success === true);
                    if (res.success !== undefined && res.success === true) {
                        that.$message.success('删除成功');
                        that.initProjectList();
                    } else {
                        that.$message.error('删除失败', res.errorMessage);
                    }
                }).catch((err) => {
                    console.error("删除项目失败：", err);
                    that.$message.error('删除失败', err.errorMessage);
                });
            }).catch(action => {
                console.log("异常：", action)
            });

        },
        ...mapMutations(["setCurrentProjectConfig", "setPmDict"])
    }
};
</script>

<style lang="scss" scoped>
.piplineMainPage {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    font-family: "montserrat";
    background-image: linear-gradient(45deg, #2c3e50, #27ae60, #2980b9, #8e44ad);
    background-size: 400%;
    // animation: bganimation 15s infinite;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-content: center;

    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}

.right-top-menu {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 280px;
    height: 50px;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;

    .add-new-project,
    .exit {
        width: 50%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: white;
        cursor: pointer;
        transition: all;
    }

    .add-new-project:hover,
    .exit:hover {
        background: rgba(255, 255, 255, 0.2); // 半透明白色
        backdrop-filter: blur(10px); // 磨玻璃效果
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); // 可选：添加阴影增强效果
        border: 1px solid rgba(255, 255, 255, 0.18); //
    }
}

.dialog-footer {
    text-align: right;
}

.text {
    color: white;
    text-align: center;
    text-transform: uppercase;
    height: 15vh;
    font-size: 32px;
    letter-spacing: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.projectPanel-container {
    min-width: 1280px;
    max-width: 1280px;
    height: 670px;
    min-height: 670px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;

    border: 1px solid #ccc;
    // border-radius: 10px;
    background: rgba(255, 255, 255, 0.2); // 半透明白色
    backdrop-filter: blur(10px); // 磨玻璃效果
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); // 可选：添加阴影增强效果
    border: 1px solid rgba(255, 255, 255, 0.18); // 可选：调整边框颜色与半透明背景协调
    padding: 10px;

    .project-area-tree {
        width: 280px;
        height: 100%;
        border: 1px solid rgba(255, 255, 255, 0.5);
        padding: 10px;
    }

    .project-panel {
        flex: 1;
        height: 100%;
        // border: 1px solid blue;
        border: none;
        // border-radius: 10px;
        margin-left: 10px;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        overflow: auto; //滚动条设置透明

        .project-panel::-webkit-scrollbar {
            width: 6px;
            height: 12px;
        }

        .project-panel::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            margin: 5px;
        }

        .project-panel::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(5px);
            border-radius: 10px;
            border: 2px solid rgba(255, 255, 255, 0.2);
        }

        .project-panel::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }

        .project-panel::-webkit-scrollbar-corner {
            background: rgba(255, 255, 255, 0.1);
        }

        .search-panel {
            width: 100%;
            height: 50px;
            // border: 2px solid rgba(255, 255, 255, 0.5);
            border-radius: 5px;
            margin-bottom: 10px;

            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;

            .search-item {
                height: 100%;
                // border: 1px solid red;
                margin-left: 10px;
                padding-left: 10px;
                padding-right: 10px;

                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;

                div {
                    color: white;
                    font-size: 14px;
                    margin-right: 5px;
                }


            }
        }

        .project-panel-list {
            height: 590px;
            width: 100%;
            border: 1px solid rgba(255, 255, 255, 0.5);

            .list-header {
                width: 100%;
                height: 35px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.5);

                div {
                    height: 100%;
                    float: left;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: white;
                    border-right: 1px solid rgba(255, 255, 255, 0.5);
                }

                div:nth-child(1) {
                    width: 50px;
                }

                div:nth-child(2) {
                    width: 300px;
                }

                div:nth-child(3) {
                    width: 200px;
                }

                div:nth-child(4) {
                    width: 100px;
                }

                //div:nth-child(5) {
                //    width: 85px;
                //}

                div:nth-child(5) {
                    width: 220px;
                    border: none;
                }
            }

            .list-content {
                width: 100%;
                height: 553px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.5);
                overflow: auto;

                .project-item {

                    height: 50px !important;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.5);

                    div {
                        height: 100%;
                        float: left;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: white;
                        border-right: 1px solid rgba(255, 255, 255, 0.5);
                    }

                    div:nth-child(1) {
                        width: 50px;
                    }

                    div:nth-child(2) {
                        width: 300px;
                    }

                    div:nth-child(3) {
                        width: 200px;
                    }

                    div:nth-child(4) {
                        width: 100px;
                    }

                    //div:nth-child(5) {
                    //    width: 85px;
                    //}

                    div:nth-child(5) {
                        width: 220px;
                        border: none;
                    }
                }

            }
        }

    }

    // .projectPanel {
    //     min-width: 1160px;
    //     max-width: 1160px;
    //     height: 670px;
    //     min-height: 670px;
    //     border: 1px solid #ccc;
    //     border-radius: 10px;

    //     background: rgba(255, 255, 255, 0.2); // 半透明白色
    //     backdrop-filter: blur(10px); // 磨玻璃效果
    //     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); // 可选：添加阴影增强效果
    //     border: 1px solid rgba(255, 255, 255, 0.18); // 可选：调整边框颜色与半透明背景协调

    //     padding: 10px;
    //     display: flex;
    //     justify-content: flex-start;
    //     align-items: flex-start;
    //     align-content: flex-start;
    //     flex-wrap: wrap;

    //     overflow: auto; //滚动条设置透明


    //     .project-item {
    //         width: 275px;
    //         height: 150px;
    //         border: 1px solid rgba(255, 255, 255, 0.5);

    //         background: rgba(255, 255, 255, 0.2); // 半透明白色
    //         backdrop-filter: blur(10px); // 磨玻璃效果
    //         box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); // 可选：添加阴影增强效果
    //         border: 1px solid rgba(255, 255, 255, 0.18); // 可选：调整边框颜色与半透明背景协调

    //         border-radius: 5px;
    //         box-sizing: border-box;
    //         cursor: pointer;
    //         color: white;

    //         display: flex;
    //         flex-direction: column;
    //         justify-content: flex-start;
    //         align-items: center;

    //         transition: all 0.5s ease;

    //         .item-title {
    //             width: 100%;
    //             height: 50px;
    //             font-size: large;
    //             // border: 1px solid red;
    //             display: flex;
    //             justify-content: center;
    //             align-items: center;
    //         }

    //         .item-time {
    //             width: 100%;
    //             height: 30px;
    //             // border: 1px solid red;
    //             padding-left: 10px;
    //         }

    //         .item-area {
    //             width: 100%;
    //             height: 30px;
    //             // border: 1px solid red;
    //             padding-left: 10px;
    //         }

    //         .item-operation {
    //             width: 100%;
    //             flex: 1;
    //             // border: 1px solid red;

    //             display: flex;
    //             justify-content: space-evenly;


    //             .btn-donate {
    //                 width: 90px;
    //                 height: 30px !important;
    //                 --clr-font-main: hsla(0 0% 20% / 100);
    //                 --btn-bg-1: hsla(194 100% 69% / 1);
    //                 --btn-bg-2: hsla(217 100% 56% / 1);
    //                 --btn-bg-color: hsla(360 100% 100% / 1);
    //                 --radii: 0.5em;
    //                 cursor: pointer;
    //                 padding: 0.3em 1.2em;
    //                 // min-width: 120px;
    //                 // min-height: 44px;
    //                 font-size: var(--size, 1rem);
    //                 font-weight: 500;
    //                 transition: 0.8s;
    //                 background-size: 280% auto;
    //                 background-image: linear-gradient(325deg,
    //                         var(--btn-bg-2) 0%,
    //                         var(--btn-bg-1) 55%,
    //                         var(--btn-bg-2) 90%);
    //                 border: none;
    //                 border-radius: var(--radii);
    //                 color: var(--btn-bg-color);
    //                 box-shadow:
    //                     0px 0px 20px rgba(71, 184, 255, 0.5),
    //                     0px 5px 5px -1px rgba(58, 125, 233, 0.25),
    //                     inset 4px 4px 8px rgba(175, 230, 255, 0.5),
    //                     inset -4px -4px 8px rgba(19, 95, 216, 0.35);
    //             }

    //             .btn-donate:nth-child(2) {
    //                 --btn-bg-1: rgb(253, 4, 4);
    //                 --btn-bg-2: rgb(230, 227, 76);
    //             }

    //             .btn-donate:hover {
    //                 background-position: right top;
    //             }

    //             .btn-donate:is(:focus, :focus-visible, :active) {
    //                 outline: none;
    //                 box-shadow:
    //                     0 0 0 3px var(--btn-bg-color),
    //                     0 0 0 6px var(--btn-bg-2);
    //             }

    //             @media (prefers-reduced-motion: reduce) {
    //                 .btn-donate {
    //                     transition: linear;
    //                 }
    //             }

    //         }
    //     }

    //     .project-item:hover {
    //         transform: scale(1.05);
    //         box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); // 可选：添加阴影增强效果
    //     }

    //     .project-item:not(:nth-child(4n+1)) {
    //         margin-left: 10px;
    //     }

    //     .project-item:nth-child(n+5) {
    //         margin-top: 10px;
    //     }
    // }

    // /* 自定义半透明滚动条 - Webkit浏览器 */
    // .projectPanel::-webkit-scrollbar {
    //     width: 6px;
    //     height: 12px;
    // }

    // .projectPanel::-webkit-scrollbar-track {
    //     background: rgba(255, 255, 255, 0.1);
    //     border-radius: 10px;
    //     margin: 5px;
    // }

    // .projectPanel::-webkit-scrollbar-thumb {
    //     background: rgba(255, 255, 255, 0.2);
    //     backdrop-filter: blur(5px);
    //     border-radius: 10px;
    //     border: 2px solid rgba(255, 255, 255, 0.2);
    // }

    // .projectPanel::-webkit-scrollbar-thumb:hover {
    //     background: rgba(255, 255, 255, 0.5);
    // }

    // .projectPanel::-webkit-scrollbar-corner {
    //     background: rgba(255, 255, 255, 0.1);
    // }
}

//@keyframes bganimation {
//    0% {
//        background-position: 0% 50%;
//    }
//
//    50% {
//        background-position: 100% 50%;
//    }
//
//    100% {
//        background-position: 0% 50%;
//    }
//}

::v-deep .el-tree {
    background-color: rgba(255, 255, 255, 0) !important; // 半透明白色
    color: white !important;
}

::v-deep .el-tree-node__content:hover {
    background-color: rgba(255, 255, 255, 0) !important; // 半透明白色
    color: white !important;
}

::v-deep .el-tree-node:focus>.el-tree-node__content {
    background-color: rgba(255, 255, 255, 0) !important; // 半透明白色
    color: white !important;
}

::v-deep .el-tree-node.is-current > .el-tree-node__content {
  background-color: rgba(255, 255, 255, 0.5) !important; // 半透明白色
  color: white !important;
}

::v-deep .el-tree-node__label {
    font-size: 14px !important;
}

::v-deep .el-tree-node__content {
    height: 40px !important;
    line-height: 40px !important;
}

///
///
///
::v-deep .el-input__inner {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: white !important;
}

::v-deep .el-input__inner::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

::v-deep .el-select .el-input__inner {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: white !important;
}

::v-deep .el-select-dropdown {
    background-color: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

::v-deep .el-select-dropdown__item {
    color: white !important;
}

::v-deep .el-select-dropdown__item.hover,
::v-deep .el-select-dropdown__item:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

::v-deep .el-select-dropdown__item.selected {
    background-color: rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}
</style>
